<html>
      <head>
        <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />
        <meta charset="utf-8">
        <meta name="referrer" content="never">
        <title>HTML的概述 | 暗天使</title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.11.1/katex.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <link rel="stylesheet" href="http://localhost:4000/styles/main.css">
          <script src="http://localhost:4000/media/scripts/mdui.min.js"></script>
        <link rel="stylesheet" href="https://at.alicdn.com/t/font_1306644_jwtuc2zzbrd.css">
        <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Ma+Shan+Zheng&display=swap" rel="stylesheet">
        <script src="https://cdn.bootcss.com/highlight.js/9.15.10/highlight.min.js"></script>
        <script src="http://localhost:4000/media/scripts/script.js"></script>
        <script >hljs.initHighlightingOnLoad();</script>
        

    </head>
    <body class="mdui-theme-primary-purple mdui-theme-accent-purple">
        <header class="index-img mdui-m-b-3"  style="background-image: url(http://localhost:4000/post-images/html-de-gai-shu.jpg);" >
                          <button class="mdui-btn  mdui-btn-icon mdui-btn-dense mdui-color-theme-500 mdui-ripple yinying mdui-m-t-1 mdui-m-l-1" mdui-menu="{target: '#demo-attr-cascade'}">
                  <i class="mdui-icon material-icons"><svg fill="#fff" t="1617688782784" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2678" width="24" height="24"><path d="M170.666667 298.666667m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z" p-id="2679"></path><path d="M170.666667 512m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z" p-id="2680"></path><path d="M170.666667 725.333333m-42.666667 0a42.666667 42.666667 0 1 0 85.333333 0 42.666667 42.666667 0 1 0-85.333333 0Z" p-id="2681"></path><path d="M298.666667 469.333333m40.106666 0l517.12 0q40.106667 0 40.106667 40.106667l0 5.12q0 40.106667-40.106667 40.106667l-517.12 0q-40.106667 0-40.106666-40.106667l0-5.12q0-40.106667 40.106666-40.106667Z" p-id="2682"></path><path d="M298.666667 682.666667m40.106666 0l517.12 0q40.106667 0 40.106667 40.106666l0 5.12q0 40.106667-40.106667 40.106667l-517.12 0q-40.106667 0-40.106666-40.106667l0-5.12q0-40.106667 40.106666-40.106666Z" p-id="2683"></path><path d="M298.666667 256m40.106666 0l517.12 0q40.106667 0 40.106667 40.106667l0 5.12q0 40.106667-40.106667 40.106666l-517.12 0q-40.106667 0-40.106666-40.106666l0-5.12q0-40.106667 40.106666-40.106667Z" p-id="2684"></path></svg></i></button>
                <ul class="mdui-menu" id="demo-attr-cascade">
                
                        <li class="mdui-menu-item">
                          <a href="/" class="mdui-ripple">首页</a>
                        </li>
                
                        <li class="mdui-menu-item">
                          <a href="/archives" class="mdui-ripple">归档</a>
                        </li>
                
                        <li class="mdui-menu-item">
                          <a href="/tags" class="mdui-ripple">标签</a>
                        </li>
                
                        <li class="mdui-menu-item">
                          <a href="/post/about" class="mdui-ripple">关于</a>
                        </li>
                
                        <li class="mdui-menu-item">
                          <a href="/post/FriendLink" class="mdui-ripple">友链</a>
                        </li>
                
                      </ul>


        </header>
        <div class="mdui-container post">
                <div class="mdui-row">
                        <div class="mdui-col-md-8 mdui-col-offset-md-2 ">
                         <article class="mdui-shadow-10 mdui-p-a-2 post-list">
                           <div class="mdui-typo-display-1 mdui-m-b-3">HTML的概述</div>
                           <a  class="index-list-biaoqian ">2021-04-04</a>
                           <div class="mdui-typo mdui-m-t-3 post-neirong"><p>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。</p>
<!-- more -->
<h2 id="html的概念">HTML的概念</h2>
<p><strong>HTML</strong> 全称为 HyperText Markup Language，译为<font color=#0000ff><strong>超文本标记语言</strong></font>。</p>
<p>HTML 不是一种编程语言，是一种描述性的<strong>标记语言</strong>。</p>
<p><strong>作用</strong>：HTML是负责描述文档<strong>语义</strong>的语言。</p>
<h3 id="概念超文本">概念：超文本</h3>
<p>所谓的超文本，有两层含义：</p>
<p>（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。</p>
<p>（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。</p>
<h3 id="概念标记语言">概念：标记语言</h3>
<p>HTML 不是一种编程语言，是一种描述性的<strong>标记语言</strong>。这主要有两层含义：</p>
<p>（1）<strong>标记语言是一套标记标签</strong>。比如：标签<code>&lt;a&gt;</code>表示超链接、标签<code>&lt;img&gt;</code>表示图片、标签<code>&lt;h1&gt;</code>表示一级标题等等，它们都是属于 HTML 标签。</p>
<p>说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。</p>
<p>（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。</p>
<h2 id="html是负责描述文档语义的语言">HTML是负责描述文档语义的语言</h2>
<p>HTML 格式的文件是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。</p>
<p>接下来，我们需要学习 HTML 中的很多“标签对儿”，这些“标签对儿”能够给文本不同的语义。</p>
<p>问，<code>&lt;h1&gt;</code> 标签有什么作用？</p>
<ul>
<li>正确答案：给文本增加主标题的语义。</li>
<li>错误答案：给文字加粗、加黑、变大。</li>
</ul>
<p>关乎“语义”的更深刻理解，等接下来我们学习了各种标签，就明白了。</p>
<h2 id="html的历史">HTML的历史</h2>
<ul>
<li>
<p>1991 HTML</p>
</li>
<li>
<p>1994 HTML2</p>
</li>
<li>
<p>1997 HTML4</p>
</li>
<li>
<p>2000 XHTML1（严格的html）</p>
</li>
<li>
<p>2009 HTML5</p>
</li>
<li>
<p>2014 HTML5 Finalized</p>
</li>
</ul>
<p>其中，我们专门来对XHTML做一个介绍。</p>
<p><strong>XHTML介绍：</strong><br>
XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言。<br>
XHTML的主要目的是为了<font color="blue"><strong>取代HTML</strong></font>，也可以理解为HTML的升级版。<br>
HTML的标记书写很不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。<br>
XHTML与HTML4.0的标记基本上一样。<br>
XHTML是<font color="blue"><strong>严格的、纯净的</strong></font>HTML。</p>
<p>这里只做了解</p>
<h2 id="html的专有名词">HTML的专有名词</h2>
<ul>
<li>网页 ：由各种标记组成的一个页面就叫网页。</li>
<li>主页(首页) : 一个网站的起始页面或者导航页面。</li>
<li>标记：  比如<code>&lt;p&gt;</code>称为开始标记 ，<code>&lt;/p&gt;</code>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。</li>
<li>元素：比如<code>&lt;p&gt;内容&lt;/p&gt;</code>称为元素.</li>
<li>属性：给每一个标签所做的辅助信息。</li>
<li>XHTML：符合XML语法标准的HTML。</li>
<li>DHTML：dynamic，动态的。<code>javascript + css + html</code>合起来的页面就是一个 DHTML。</li>
<li>HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。</li>
<li>SMTP：邮件传输协议。</li>
<li>FTP：文件传输协议。</li>
</ul>
<h2 id="书写第一个-html-页面">书写第一个 HTML 页面</h2>
<p>新建一个文件，名叫<code>test.html</code>（注意，文件名是<code>test</code>，后缀名是<code>html</code>），保存到本地。<br>
如果你用VS code 软件，可以输入<code>html:5</code>，然后按一下键盘上的<code>Tab</code>键，就可以自动生成如下内容：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>上面的内容，就是 html 页面的骨架。我们在此基础之上，新增几个标签，完整代码如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h3&gt;我是三级标题&lt;/h3&gt;
    &lt;img src=&quot;&quot; alt=&quot;&quot;&gt;
    &lt;a href=&quot;https://www.jd.com&quot;&gt;我是超链接，可以点击一下&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;

</code></pre>
<p>标签写完之后，我们用 chrome 浏览器打开上面这个<code>test.html</code>文件，看看页面效果：</p>
<p>到此，第一个简单的 HTML 页面就写完了。是不是很有成就感？</p>
</div>
                              <div class="mdui-divider mdui-m-t-3"></div>
                              <div class="mdui-row-xs-2 mdui-m-t-2">
  <div class="mdui-col"> <div class="mdui-text-left"><a href="http://localhost:4000/post/html-jie-gou-xiang-jie/">HTML结构详解</a></div></div>
 <div class="mdui-col"></div>
                                </div>
                                <div class="mdui-divider mdui-m-t-2"></div>
   
 <script src="http://localhost:4000/media/scripts/Valine.min.js"></script>
 <div class="comment"></div>

<script>
      new Valine({
            el: '.comment',



            path: window.location.pathname,
            pageSize: 30,
            avatar:'mm', 
       })

    </script> 
<script>
    if(window.location.hash){
        var checkExist = setInterval(function() {
           if ($(window.location.hash).length) {
              $('html, body').animate({scrollTop: $(window.location.hash).offset().top-90}, 1000);
              clearInterval(checkExist);
           }
        }, 100);
    }
</script>
                         </article>
                 <div class="toc-container mdui-float-right">
                   <style>.toc-container .markdownIt-TOC{display: none; top: 0px;}</style>
                <ul class="markdownIt-TOC">
<li>
<ul>
<li><a href="#html%E7%9A%84%E6%A6%82%E5%BF%B5">HTML的概念</a>
<ul>
<li><a href="#%E6%A6%82%E5%BF%B5%E8%B6%85%E6%96%87%E6%9C%AC">概念：超文本</a></li>
<li><a href="#%E6%A6%82%E5%BF%B5%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80">概念：标记语言</a></li>
</ul>
</li>
<li><a href="#html%E6%98%AF%E8%B4%9F%E8%B4%A3%E6%8F%8F%E8%BF%B0%E6%96%87%E6%A1%A3%E8%AF%AD%E4%B9%89%E7%9A%84%E8%AF%AD%E8%A8%80">HTML是负责描述文档语义的语言</a></li>
<li><a href="#html%E7%9A%84%E5%8E%86%E5%8F%B2">HTML的历史</a></li>
<li><a href="#html%E7%9A%84%E4%B8%93%E6%9C%89%E5%90%8D%E8%AF%8D">HTML的专有名词</a></li>
<li><a href="#%E4%B9%A6%E5%86%99%E7%AC%AC%E4%B8%80%E4%B8%AA-html-%E9%A1%B5%E9%9D%A2">书写第一个 HTML 页面</a></li>
</ul>
</li>
</ul>

                <script>
                     $(window).scroll(function() {
                      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                      if (scrollTop > 350){ $(".markdownIt-TOC")[0].style.display = "block" }else{  $(".markdownIt-TOC")[0].style.display = "none" }})
                </script>
              </div>

                        </div>
                 </div>
          
        </div>
        <script data-no-instant>
    (function ($) {
        $.extend({
            adamsOverload: function () {
                $.viewImage({
                    'target'  : '.post-neirong img',
                    'exclude' : '.vsmile-icons img , .song-links-item img',
                    'delay'   : 300
                });
            }
        });
    })(jQuery);
    jQuery.adamsOverload();

    let e = document.getElementsByTagName("video")
                    for (let i=0; i<e.length; i++){
                      e[i].style.width = "100%"
                      e[i].controls = true
                    }
</script>
        <footer class="footer mdui-m-t-5 mdui-text-center">
               <nav class="social-links">
                      <ul>
                      
                            	
                        <li class="social-link"><a href="#" target="_blank"><i class="iconfont icon-rss"></i></a></li>
                         
                           
                            
                           
                            	
                        <li class="social-link"><a href="https://github.com/" target="_blank"><i class="iconfont icon-github"></i></a></li>
                         
                           
                            	
                        <li class="social-link"><a href="https://www.zhihu.com/" target="_blank"><i class="iconfont icon-zhihu"></i></a></li>
                         
                           
                            
                           
                            
                           
                            
                           
                            	
                        <li class="social-link"><a href="#" target="_blank"><i class="iconfont icon-douban"></i></a></li>
                         
                           
                            
                           
                            	
                        <li class="social-link"><a href="#" target="_blank"><i class="iconfont icon-qq"></i></a></li>
                         
                           
                            	
                        <li class="social-link"><a href="#" target="_blank"><i class="iconfont icon-weibo"></i></a></li>
                         
                           
                            	
                        <li class="social-link"><a href="https://www.bilibili.com/" target="_blank"><i class="iconfont icon-youtube"></i></a></li>
                         
                           
                      </ul>
                    </nav>
                  <div class="copyright">
                      <p><h4>邪王暗焰 の 博客</h4>
静态博客由 <a href="https://github.com/getgridea/gridea" target="_blank">Gridea</a> 构建，站点主题为 <a href="https://github.com/shanbufun/gridea-theme-jia" target="_blank">jia</a> 并在其基础上修改
<p>2021年0月0日</p></p>
                  </div>
                  
              </footer>
    </body>
</html>